<template>
    <div id="recommended">
        
        <div v-for = "(itme,index) in ss" :key="itme.id" class="reco"
         :class="{aactive:index === is}"
         @click="acitme(index)"
       
        
        >
            <span>{{itme.name}}</span>

        </div>
            
             
        

    </div>
</template>
<script>
export default {
    name:'Recommended',
    data(){
        return{
           ss:[
                {id:1,name:'全部'},
                {id:2, name:'推荐'},
                 {id:3, name:'活动'}

            ],

            
            is:0
        }
    },
    methods:{
        acitme(index){
            this.is = index
            this.$emit('rec',index)
        }
    }
}
</script>
<style scoped>
#recommended{
    display: flex;
    height: 30px;
    width: 100%;
    padding-bottom: 10px;
    background-color: rgba(236, 222, 222, 0.856);
    margin-bottom: 20px;
   
    
}
.reco{
    display: flex;
    width: 100%;
     justify-content: center;
      align-items: center;
    
}
span{
    /* width: 130px; */
    display: inline-block;
    flex: 1;
    text-align: center;
   
   
    
}
.aactive{
    color: #ff5000;
}

</style>